<!-- 转正 -->
<template>
  <div class="rthcHead">
    <div class="rthcImg">
      <img src="@/assets/img/personnelImage/岗位需求库.png">
      <span class="rthcTi" title="员工转正台账">员工转正台账</span>
    </div>
    <div class="rthc-handle">
      <span class="rthc-handle-pri">
        <el-button type="primary" @click="cfmLink">员工转正申请</el-button>
      </span>
      <span class="rthc-handle-more">
       <el-dropdown>
         <span>
          <el-icon>
            <setting/>
        </el-icon>
        </span>
       <template v-slot:dropdown>
         <el-dropdown-menu>
           <el-dropdown-item icon="el-icon-plus" @click="cfmLink">员工转正申请</el-dropdown-item>
           <el-dropdown-item icon="el-icon-circle-plus-outline">新建</el-dropdown-item>
           <el-dropdown-item icon="el-icon-check">删除</el-dropdown-item>
           <el-dropdown-item icon="el-icon-circle-check">修改</el-dropdown-item>
         </el-dropdown-menu>
       </template>
    </el-dropdown>
      </span>
    </div>
  </div>
  <div style="height: 100%; min-height: 235px;">
    <div class="rthc-list-table" style="margin-top: 0">
      <el-table ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                :header-cell-style="{background:'#F7FBFE',color:'#606266'}"
                @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="expand">
          <template #default="props">
            <img src="https://img0.baidu.com/it/u=652041139,3023980007&fm=253&fmt=auto&app=138&f=JPG?w=460&h=649"/>
            <p>姓名: {{ props.row.sj }}</p>
            <p>性别: {{ props.row.sj }}</p>
            <p>部门: {{ props.row.sj }}</p>
            <p>岗位: {{ props.row.city }}</p>
            <p>上级: {{ props.row.address }}</p>
            <p>状态: {{ props.row.zip }}</p>
            <p>电话: {{ props.row.zip }}</p>
            <p>邮件: {{ props.row.zip }}</p>
          </template>
        </el-table-column>
        <el-table-column label="转正人员" prop="zzname" />
        <el-table-column label="转正人员部门" prop="zzbumen" />
        <el-table-column label="转正人员上级领导" prop="zzsjld" />
        <el-table-column label="入职日期" prop="rzrq" />
        <el-table-column label="申请日期" prop="sqrq" />
        <el-table-column label="流程ID" prop="lcbh" />
        <el-table-column label="流程状态" prop="lczt">
          <template #default="xx">
            <el-tag type="warning" v-if="xx.row.lczt === '0'">审批中</el-tag>
            <el-tag type="success" v-else-if="xx.row.lczt === '1'">审批通过</el-tag>
            <el-tag v-else-if="xx.row.lczt === '2'">已失效</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="rthc-list-table">
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{background:'#F7FBFE',color:'#606266'}"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="name"
            label="转正人员"
            width="120">
        </el-table-column>
        <el-table-column
            prop="hid"
            label="转正人员部门"
            width="120">
        </el-table-column>
        <el-table-column
            prop="yname"
            label="转正人员上级"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="d1"
            label="入职日期"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="de"
            label="申请日期"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="de"
            label="转正流程ID"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="dstaus"
            label="流程状态"
            show-overflow-tooltip>
          <template #default="xx">
            <el-tag type="warning" v-if="xx.row.dstaus === '0'">签署中</el-tag>
            <el-tag type="success" v-else-if="xx.row.dstaus === '1'">已完成</el-tag>
            <el-tag v-else-if="xx.row.dstaus === '2'">审批中</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="pag-block footer" style="">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      restaurants: [],
      state: '',
      tableData: [
        {
          zzname:'1',
          zzbumen:'2',
          zzsjld:'3',
          rzrq: 4,
          sqrq : 5,
          lcbh:6,
          lczt:'0',
          sj:'123'
        }
      ],
      multipleSelection: []
    }
  },
  methods: {
    cfmLink(){
      this.$router.push({path:'/cfm'})
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/personnelCss/RecruitHeadcount";
</style>